<template>
  <div class="com-container">
    <div class="com-chart" ref="stock" ></div>
  </div>
</template>

<script>
import "../assets/js/essos.js";
export default {
  data() {
    return {
      allData: [],
      myCharts: null,
      pageNumber: 1,
      pageSize: 5,
      totalPages: 0,
      timerId: null,
      titleFontSize:0,
    };
  },
  methods: {
    //初始化报表
    async initCharts() {
      this.myCharts = this.$echarts.init(this.$refs.stock, "essos");
      //初始化报表配置项，与数据无关
      const initOptions = {
        title: {
          text: "▎ 库存销售量",
          left: 20,
          top: 20,
          textStyle: {
            color: "#893448",
            // fontSize:25,
          },
        },
      };
      this.myCharts.setOption(initOptions);
      this.myCharts.on('mouseover',()=>{
          clearInterval(this.timerId)
      })
      this.myCharts.on('mouseout',()=>{
          this.startInterval()
      })
      //计算总页数
      const { data } = await this.$axios.get("/data");
      this.totalPages =
        data.length % this.pageSize == 0
          ? parseInt(data.length / this.pageSize)
          : parseInt(data.length / this.pageSize) + 1;
      this.startInterval();
    },
    //创建报表
    async createReports() {
      //获取数据
      const { data } = await this.$axios.get("http://localhost:3000/stock?_page=" +
          this.pageNumber +
          "&_limit=" +
          this.pageSize);
      this.allData = data;

      // 5个圆环对应的圆心点
      const centerPointers = [
        ["18%", "40%"],
        ["50%", "40%"],
        ["82%", "40%"],
        ["34%", "75%"],
        ["66%", "75%"],
      ];

      // 增加5个圆环的渐变颜色范围
      const colorArrs = [
        ["#4FF778", "#0BA82C"],
        ["#E5DD45", "#E8B11C"],
        ["#E8821C", "#E55445"],
        ["#5052EE", "#AB6EE5"],
        ["#23E5E5", "#2E72BF"],
      ];

      const seriesArray = this.allData.map((item, index) => {
        return {
          type: "pie",
          center: centerPointers[index],
          //饼图的半径
          // radius: [110, 100],
          hoverAnimation: false,
          label: {
            show: true,
            position: "center",
            color: colorArrs[index][0],
            // fontSize:25
          },
          labelLine: {
            show: false,
          },
          data: [            
            {
              name: item.name + "\n\n" + item.sales,
              value: item.sales,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  { offset: 0, color: colorArrs[index][0] },
                  { offset: 1, color: colorArrs[index][1] },
                ]),
              },
            },
            {
              value: item.stock,
              itemStyle: { color: "rgba(242,234,191,0.5)" },
            }
          ],
        };
      });

      //报表数据样式等设计
      var dataOptions = {
        series: seriesArray,
      };
      this.myCharts.setOption(dataOptions);
       this.startInterval()
    },
    //定时器切换动画
    startInterval() {
      if (this.timerId) {
        clearInterval(this.timerId);
      }
      this.timerId = setInterval(() => {
        this.pageNumber++;
        if (this.pageNumber > this.totalPages) {
           this.pageNumber = 1;
        }
        this.createReports();
      }, 3000);
    },
    // 当浏览器的大小发生变化的时候, 会调用的方法, 来完成屏幕的适配
    screenAdapter() {
      this.titleFontSize = (this.$refs.stock.offsetWidth / 100) * 3.6;
      const innerRadius = this.titleFontSize * 2; 
      const outterRadius = innerRadius * 1.12;
      // 和分辨率大小相关的配置项
      const adapterOption = {
        title: {
          textStyle: {
            fontSize: this.titleFontSize,
          },
        },
        series:[{
          type: "pie",
          radius: [outterRadius, innerRadius], 
          label: { fontSize: this.titleFontSize / 2 }
        },{
          type: "pie",
          radius: [outterRadius, innerRadius], 
          label: { fontSize: this.titleFontSize / 2 }
        },{
          type: "pie",
          radius: [outterRadius, innerRadius], 
          label: { fontSize: this.titleFontSize / 2 }
        },{
          type: "pie",
          radius: [outterRadius, innerRadius], 
          label: { fontSize: this.titleFontSize / 2 }
        },{
          type: "pie",
          radius: [outterRadius, innerRadius], 
          label: { fontSize: this.titleFontSize / 2 }
        }]
        
      };
      this.myCharts.setOption(adapterOption);
      this.myCharts.resize();
    },
  },
  mounted: function () {   
    this.initCharts();
    this.createReports();
    this.screenAdapter();
     window.addEventListener("resize", this.screenAdapter);
  },
};
</script>

<style>
.com-container{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.com-chart{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>